import React, { PureComponent } from 'react';
import echarts from 'echarts/dist/echarts.js';
// import 'echarts/lib/chart/line';
// import 'echarts/lib/chart/bar';
// import 'echarts/lib/chart/candlestick';
// import 'echarts/lib/chart/effectScatter';
// import 'echarts/lib/component/grid';
// import 'echarts/lib/component/tooltip';
// import 'echarts/lib/component/markLine';
// import 'echarts/lib/component/markPoint';
// import 'echarts/lib/component/title';
// import 'echarts/lib/component/dataZoom';
// import 'echarts/lib/component/markArea';
// import 'echarts/lib/component/legend';

let myChart;

class Echarts extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  setOption(data) {
    const list = data;
    const dataSource = {
      date: [],
      growth: [],
      fundpercent: [],
      spypercent: [],
      exceed: [],
    };
    for (let i = 0; i < list.length; i++) {
      const item = list[i];
      // @ts-ignore
      dataSource.date.push(item.date);
      // @ts-ignore
      // dataSource.growth.push(item.netBoost);
      // @ts-ignore
      dataSource.fundpercent.push(item.fundNetValue);
      // @ts-ignore
      // dataSource.spypercent.push(item.spyNetValue);
      // @ts-ignore
      // dataSource.exceed.push(parseFloat(
      //   (item.fundNetValue - item.spyNetValue).toFixed(
      //     6
      //   ))
      // )
      /*   {
              value: ((item.fundpercent - item.spypercent).toFixed(6)),
          itemStyle: {

              color:((item.fundpercent - item.spypercent) > 0 ? 'green' : 'green')
          },
  } */
    }
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
        },
        formatter(params) {
          let result = params[0].name;
          let infex = 0;
          params.forEach(function(item) {
            infex += 1;
            result += '<br/>';
            if (item.seriesName === '超额收益') {
              if (item.value > 0) {
                result +=
                  '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                  'rgba(138,188,80,0.3)' +
                  '"></span>';
              } else {
                result +=
                  '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                  'rgba(222,44,84,0.3)' +
                  '"></span>';
              }
            } else if (item.seriesName === '差值') {
              result +=
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                '#999999' +
                '"></span>';
            } else if (item.seriesName === '一号') {
              result +=
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                '#4e81bd' +
                '"></span>';
            } else if (item.seriesName === 'SPY') {
              result +=
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                '#c1504c' +
                '"></span>';
            }

            result += `${item.seriesName}：`;

            if (item.seriesName === '超额收益') {
              result += isNaN(item.value) ? 0 : `${window.mathService.mul(item.value, 100)}%`;
            } else if (item.seriesName === '差值') {
              result += item.value;
            } else if (item.seriesName === '一号') {
              result += item.value;
            } else if (item.seriesName === 'SPY') {
              result += item.value;
            }
          });
          return result;
        },
      },
      grid: {
        width: '94%',
        left: '3%',
        // left:'10%'
        // right:'1%'
      },
      // toolbox: {
      //   feature: {
      //     dataView: {
      //       show: true,
      //       readOnly: false
      //     },
      //     magicType: {
      //       show: true,
      //       type: ['line', 'bar']
      //     },
      //     restore: {
      //       show: true
      //     },
      //     saveAsImage: {
      //       show: true
      //     }
      //   }
      // },
      legend: {
        selected: {},
        data: [
          { name: '一号', icon: 'roundRect' },
          { name: 'SPY', icon: 'roundRect' },
          { name: '超额收益', icon: 'roundRect' },
          { name: '差值', icon: 'roundRect' },
        ],
      },
      xAxis: [
        {
          type: 'category',
          data: dataSource.date,
          axisTick: {
            show: false,
          },
          axisLabel: {
            showMaxLabel: true,
            // normal
            color: '#333333',
            showMinLabel: true,
            fontSize: 13,
            padding: [10, 4, 10, 4],
          },

          // boundaryGap: ['20%', '20%'],
          axisLine: {
            lineStyle: {
              color: 'rgba(155,155,155,0.7)',
              width: 1,
              type: 'dashed',
            },
          },
          position: 'bottom',
          // splitNumber:8,
        },
      ],
      yAxis: [
        {
          type: 'value',

          max(value) {
            return (value.max + 0.01).toFixed(2);
          },
          min(value) {
            return (value.min - 0.01).toFixed(2);
          },
          // interval:0.02,
          axisLabel: {
            formatter(value, index) {
              return `${(value * 100).toFixed(1)}%`;
            },
            fontSize: 13,
            color: '#333333',
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(155,155,155,0.7)',
              width: 2,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(151,151,151,0.2)',
              type: 'dashed',
            },
          },
        },
        {
          type: 'value',
          max(value) {
            return (value.max + 0.1).toFixed(1);
          },
          min(value) {
            return (value.min - 0.1).toFixed(1);
          },
          axisLabel: {
            formatter: '{value}',
            fontSize: 13,
            color: '#333333',
          },
          axisLine: {
            show: false,

            lineStyle: {
              color: 'rgba(155,155,155,0.7)',
              width: 2,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(151,151,151,0.15)',
              type: 'dashed',
            },
          },
        },
        {
          type: 'value',
          show: false,
          max(value) {
            return (value.max + 0.1).toFixed(1);
          },
          min(value) {
            return (value.min - 0.1).toFixed(1);
          },
          axisLabel: {
            formatter: '{value}',
            color: '#333333',
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(155,155,155,0.7)',
              width: 2,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(151,151,151,0.1)',
              type: 'dashed',
            },
          },
        },
      ],
      dataZoom: [
        {
          show: true,
          xAxisIndex: 0,
          type: 'inside',
          start: 0,
          end: 100,
          // minValueSpan: 10,
        },
      ],
      series: [
        {
          name: '超额收益',
          type: 'bar',
          yAxisIndex: 0,
          label: {
            formatter(params) {
              return `${(params.data * 100).toFixed(4)}%`;
            },
          },
          itemStyle: {
            normal: {
              color(value) {
                return parseFloat(value.data) > 0 ? 'rgba(138,188,80,0.3)' : 'rgba(222,44,84,0.3)';
              },
            },
          },
          data: dataSource.growth,
        },

        {
          name: '差值',
          type: 'line',
          yAxisIndex: 2,
          showSymbol: false,
          itemStyle: {
            normal: {
              color: '#999999',
            },
          },
          lineStyle: {
            width: 1.5,
          },
          data: dataSource.exceed,
        },
        {
          name: '一号',
          type: 'line',
          showSymbol: false,
          yAxisIndex: 1,
          itemStyle: {
            normal: {
              color: '#4e81bd',
            },
          },
          lineStyle: {
            width: 1.5,
          },
          data: dataSource.fundpercent,
        },
        {
          name: 'SPY',
          type: 'line',
          yAxisIndex: 1,
          showSymbol: false,
          itemStyle: {
            normal: {
              color: '#c1504c',
            },
          },
          lineStyle: {
            width: 1.5,
          },
          data: dataSource.spypercent,
        },
      ],
    };

    myChart.setOption(option, true);
  }

  render() {
    const { mainId } = this.props;
    return (
      <div>
        <div id={mainId} style={{ width: '100%', height: 666 }} />
      </div>
    );
  }
  /* <div className={styles.entranceBox}> */

  componentDidMount() {
    const { data, mainId, symbol } = this.props;
    // @ts-ignore
    const main = document.getElementById(mainId);
    myChart = echarts.init(main, '', { renderer: 'svg' });
    this.setOption(data);
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  }

  componentWillUnmount() {
    // const {dispatch} = this.props;
    // dispatch({
    //   type: 'en/OutGroupFu',
    // });
    myChart.clear();
    myChart.dispose();
  }
}

export default Echarts;
